<template>
    <a-modal
            :title="tableTitle"
            :visible="visible"
            width="80%"
            @ok="handleOk"
            :maskClosable="false"
            :confirmLoading="confirmLoading"
            @cancel="handleCancel"
    >
        <a-form-model ref="form" :model="form">
            <a-descriptions bordered :column="1">
                <a-descriptions-item label="菜单类型">
                    <a-form-model-item
                            prop="systemMenuLevel"
                            :rules="{
                                required: true,
                                message: '请选择菜单类型',
                                trigger: 'change',
                            }">
                        <a-radio-group defaultValue='1' v-model="form.systemMenuLevel" @change="systemMenuLevel">
                            <a-radio value="1">
                                一级菜单
                            </a-radio>
                            <a-radio value="2">
                                二级菜单
                            </a-radio>
                            <a-radio value="3">
                                三级菜单
                            </a-radio>
                        </a-radio-group>
                    </a-form-model-item>
                </a-descriptions-item>
                <a-descriptions-item v-if="form.systemMenuLevel == 2 || form.systemMenuLevel == 3" label="父级菜单">
                    <a-form-model-item
                            prop="parentSystemMenuId"
                            :rules="{
                                required: true,
                                message: '请选择父级菜单',
                                trigger: 'change',
                            }">
                        <a-select
                                v-model="form.parentSystemMenuId"
                                placeholder="请选择父级菜单"
                                showSearch
                                allowClear>
                            <a-select-option :value="item.id" :key="index" v-for="(item,index) in parentList">
                                {{item.systemMenuName}}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                </a-descriptions-item>
                <a-descriptions-item label="菜单名称">
                    <a-form-model-item
                            prop="systemMenuName"
                            :rules="{
                                required: true,
                                message: '请输入菜单名称',
                                trigger: 'change',
                            }">
                        <a-input
                                placeholder="请输入菜单名称"
                                v-model="form.systemMenuName">
                        </a-input>
                    </a-form-model-item>
                </a-descriptions-item>
                <a-descriptions-item label="菜单路径">
                    <a-form-model-item>
                        <a-select
                                v-model="form.routeUrl"
                                placeholder="请选择菜单路径"
                                showSearch
                                allowClear>
                            <a-select-option :value="item.path" :key="index"
                                             v-for="(item,index) in $store.getters.menuData">
                                {{item.name}}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                </a-descriptions-item>

                <a-descriptions-item label="菜单路径参数">
                    <a-form-model-item
                            prop="systemMenuName"
                            :rules="{
                                required: true,
                                message: '请输入菜单路径参数',
                                trigger: 'change',
                            }">
                        <a-input
                                placeholder="请输入菜单路径参数"
                                v-model="form.query">
                        </a-input>
                    </a-form-model-item>
                </a-descriptions-item>


                <a-descriptions-item label="排序">
                    <a-form-model-item
                            prop="dataSort"
                            :rules="{
                                required: true,
                                message: '请输入排序',
                                trigger: 'change',
                            }">
                        <a-input-number
                                :min="0"
                                placeholder="请输入排序"
                                v-model="form.dataSort">
                        </a-input-number>
                    </a-form-model-item>
                </a-descriptions-item>
                <a-descriptions-item label="图标">
                    <a-form-model-item
                            prop="systemMenuIcon"
                            :rules="{
                                required: true,
                                message: '点击右侧按钮选择图标',
                                trigger: 'change',
                            }">
                        <a-input placeholder="点击右侧按钮选择图标" v-model="form.systemMenuIcon">
                            <a-icon slot="addonAfter" type="setting" @click="iconChooseVisible=true"/>
                        </a-input>
                    </a-form-model-item>
                </a-descriptions-item>
                <!--<a-descriptions-item label="是否域外跳转">-->
                <!--<a-form-model-item-->
                <!--prop="href"-->
                <!--:rules="{-->
                <!--required: true,-->
                <!--message: '请选择是否域外跳转',-->
                <!--trigger: 'change',-->
                <!--}">-->
                <!--<a-radio-group v-model="form.href">-->
                <!--<a-radio value="是">-->
                <!--是-->
                <!--</a-radio>-->
                <!--<a-radio value="否">-->
                <!--否-->
                <!--</a-radio>-->
                <!--</a-radio-group>-->
                <!--</a-form-model-item>-->
                <!--</a-descriptions-item>-->
            </a-descriptions>
            <icons @choose="handleIconChoose" @close="iconChooseVisible=false"
                   :iconChooseVisible="iconChooseVisible"></icons>
        </a-form-model>
    </a-modal>
</template>
<script>
    import xlDate from '../../../../components/formUntil/xlDate'
    import xlImage from '../../../../components/formUntil/xlImage'
    import icons from '../../../../components/icon/Icons'
    import {menuParentList} from "../../../../assets/api";
    

    export default {
        name: "xlForm",
        data() {
            return {
                tableTitle: '编辑',
                visible: false,
                iconChooseVisible: false,
                confirmLoading: false,
                form: {
                    parentSystemMenuId: 0,
                    systemMenuIcon: '',
                    systemMenuLevel: 1,
                    query:''
                },
                rules: {},
                parentList: []
            }
        },
        components: {
            xlDate,
            xlImage,
            icons
        },
        created() {
            menuParentList({
                param: 1
            })
                .then(result => {
                    this.parentList = result.result
                })
        },
        methods: {
            systemMenuLevel() {
                if (this.form.systemMenuLevel == 1) {
                    this.form = {
                        ...this.form,
                        parentSystemMenuId: 0
                    }
                    return
                }
                menuParentList({
                    param: Number(this.form.systemMenuLevel) - 1
                })
                    .then(result => {
                        this.parentList = result.result
                        this.form = {
                            ...this.form,
                            parentSystemMenuId: ''
                        }
                    })
            },
            handleOk() {
                this.$refs.form.validate(valid => {
                    console.log(valid)
                    if (valid) {
                        let formData = Object.assign({},this.form)
                        formData.routeUrl = formData.routeUrl+formData.query
                        this.confirmLoading = true
                        this.$emit('handleOk', formData)
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            handleCancel() {
                this.visible = false
            },
            formatData() {
            },
            handleIconChoose(value) {
                this.form.systemMenuIcon = value
                this.iconChooseVisible = false
            },
            formatForm(form) {
                delete form.createDateTime
                delete form.modifyDateTime
                delete form.modifyBy
                delete form.createBy
                //整理字段数据 ／ 赋值 清空等
                let formData = JSON.parse(JSON.stringify(form))
                let routeUrl = formData.routeUrl.split('?')
                form.routeUrl = routeUrl[0]
                form.query = routeUrl[1]? ('?' + routeUrl[1] ) : ''
                this.form = Object.assign({}, form)
            }
        }
    }
</script>
<style scoped lang="less">
    /deep/ .ant-form-item {
        margin: 0;
    }

    /deep/ .ant-input-number {
        width: 100%;
    }

    .xl-dateRange {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .ant-checkbox-group {
        display: flex;
        flex-wrap: wrap;

        .xl-checkbox {
            display: flex;
            align-items: center;

            /deep/ span:nth-child(2):not(.ant-checkbox-inner) {
                display: flex;
                justify-content: space-between;
                white-space: pre;
            }
        }
    }
</style>
